<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background: #097CB2;
            color: #fff;
        }

        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #ccc;
            text-align: center;
            line-height: 50px;
        }

        .box {
            width: 500px;
            height: 120px;
            background-color: #ccc;
            margin-top: 20px;
            overflow: hidden;
            padding-left: 20px;
        }

        .box input {
            width: 300px;
            display: block;
            margin-top: 10px;
        }

        .box button {
            display: block;
            height: 30px;
            margin-top: 5px;
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
        }
    </style>

    <script src="vue.js"></script>

</head>

<body>
    <div id="app">
        <span :class="num==1?'active':''" @click="num=1">评论管理</span>
        <span :class="num==2?'active':''" @click="num=2">发布评论</span>
        <div class="box" v-show="num==2">
            <input type="text" v-model="name" class="form-control" id="inputEmail3" placeholder="昵称">
            <input type="text" v-model="content" class="form-control" id="inputEmail4" placeholder="评论内容">
            <button @click="add()">立即提交</button>
        </div>
        <div class="box" v-for="(item,index) in arr" v-show="num==1">
            <p>评论人：{{item.name}}</p>
            <p>评论时间：{{item.time}}</p>
            <p>评论内容：{{item.content}}</p>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 1,
            arr: [
                {
                    name: "111",
                    time: "2022-6-6",
                    content: "哈哈哈"
                }
            ],
            name: "",
            content: ""
        },
        methods: {
            add() {
                this.arr.push({
                    name: this.name,
                    time: "2022-6-6",
                    content: this.content
                }),
                    this.name = "",
                    this.content = "",
                    alert('提交成功')
            }
        }
    })
</script>